<template>
  <el-dialog width="80%" title="新增配货出库单" :visible.sync="dialogFormVisible" @open="dk()" center>
    <el-form :model="form" :inline="true" ref="form">
      <el-form-item label="商品类型:" prop="category">
        <el-select style="width: 200px" v-model="form.category" placeholder="请选择商品类型">
          <el-option label="全选" value="allpure"></el-option>
          <el-option label="素金类" value="puregold"></el-option>
          <el-option label="镶嵌类" value="mosaicclass"></el-option>
          <el-option label="其它标价类" value="otherpure"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系数:" prop="coefficient">
        <el-input style="width: 200px" v-model="form.coefficient" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="单据编号:" prop="documentNum">
        <el-input v-model="form.documentNum"></el-input>
      </el-form-item>
      <div style="float: right">
        <el-button style="height: 90px; margin: 60px 10px 0 0" type="primary" @click="aa" resetFields=""
          >选择出库商品</el-button
        >
        <el-button style="height: 90px; margin: 60px 10px 0 0" type="info">选择批量编码</el-button>
        <el-button style="height: 90px; margin: 60px 10px 0 0" type="success" @click="wanChengChuKu('form')"
          >完成出库</el-button
        >
      </div>
      <el-form-item label="创单日期:" prop="createDate">
        <el-input style="width: 200px" v-model="form.createDate"></el-input>
      </el-form-item>

      <el-form-item label="出库门店:" prop="outboundStore">
        <el-select style="width: 450px" v-model="form.outboundStore" placeholder="请选择出库类型">
          <el-option label="" value="allpure"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="柜台/类库名称:" prop="outboundCounter">
        <el-select style="width: 450px" v-model="form.outboundCounter" placeholder="请选择柜台/类库名称">
          <el-option label="" value="allpure"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入库门店:" prop="inboundStore">
        <el-select style="width: 450px" v-model="form.inboundStore" placeholder="请选择入库类型">
          <el-option label="" value="allpure"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="柜台/类库名称:" prop="inboundcounter">
        <el-select style="width: 450px" v-model="form.inboundcounter" placeholder="请选择柜台/类库名称">
          <el-option label="" value="allpure"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :cell-style="rowStyle" :header-cell-style="headStyle" border style="width: 100%">
      <el-table-column width="100px" prop="hh" label="行号" type="index"> </el-table-column>
      <el-table-column width="100px" prop="status" label="商品编码"> </el-table-column>
      <el-table-column width="100px" prop="documentNum" label="商品名称"> </el-table-column>
      <el-table-column width="100px" prop="createDate" label="模具号"> </el-table-column>
      <el-table-column width="100px" prop="outboundStore" label="电商款号"> </el-table-column>
      <el-table-column width="100px" prop="outboundCounter" label="款号"> </el-table-column>
      <el-table-column width="100px" prop="inboundStore" label="分类1"> </el-table-column>
      <el-table-column width="100px" prop="inboundcounter" label="证书1"> </el-table-column>
      <el-table-column width="100px" prop="category" label="成色"> </el-table-column>
      <el-table-column width="100px" prop="count" label="重量"> </el-table-column>
      <el-table-column width="100px" prop="totalWeight" label="单件重"> </el-table-column>
      <el-table-column width="100px" prop="totalPrice" label="数量"> </el-table-column>
      <el-table-column width="100px" prop="series" label="手寸"> </el-table-column>
      <el-table-column width="100px" prop="LabelTotalPrice" label="料价"> </el-table-column>
      <el-table-column width="100px" prop="source" label="销售工费"> </el-table-column>
      <el-table-column width="100px" prop="createPerson" label="附加费"> </el-table-column>
      <el-table-column width="100px" prop="approver" label="系列名称"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="备注"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="品牌"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="价格类型"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="标签类型"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="成本计价"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="销售计价"> </el-table-column>
      <el-table-column width="100px" prop="approvalDate" label="销售工费计价"> </el-table-column>
      <el-table-column label="操作" width="280px" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">商品详情(编辑)</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDoosApi } from '@/http/doos.js'
export default {
  name: 'ShoopView',
  data() {
    return {
      dialogFormVisible: false,
      form: {
        category: '',
        coefficient: '',
        documentNum: '',
        createDate: '',
        outboundStore: '',
        outboundCounter: '',
        inboundStore: '',
        inboundcounter: ''
      },
      tableData: []
    }
  },
  created() {
    this.$bus.$on('dakai', (bool) => {
      this.dialogFormVisible = bool
    })
  },
  methods: {
    aa() {
      console.log(this.dialogFormVisible)
      this.$router.push({
        path: '/goods_manager/inventoryStatistics',
        query: { name: 'GoodsInbounchStorage' }
      })
    },
    dk() {
      this.dialogFormVisible = true
    },
    rowStyle() {
      return 'text-align:center'
    },
    headStyle() {
      return 'text-align:center'
    },
    wanChengChuKu(formName) {
      addDoosApi({
        category: this.form.category,
        coefficient: this.form.coefficient,
        documentNum: this.form.documentNum,
        createDate: this.form.createDate,
        outboundStore: this.form.outboundStore,
        outboundCounter: this.form.outboundCounter,
        inboundStore: this.form.inboundStore,
        inboundcounter: this.form.inboundcounter
      })
        .then((res) => {
          this.dialogFormVisible = false
          this.$refs[formName].resetFields()
          console.log(res)
          this.$message({
            message: '出库成功',
            type: 'success'
          })
        })
        .catch(() => {
          this.$message({
            message: '出库失败',
            type: 'error'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>